<template>
  <div> 
    <HeaderNav :title="$t('m.headernav.EMOJILIST')" :showBack='true' />
    <div v-if="list.length > 0" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
      <div class="emojilist_container">
        <div class="emojilist_box"  @click='showDetail(item)' v-for="(item,index) in list" :key="index">
        <img :src="item.httpPath" class="emojilist_img" />
        <div class="emojilist_name">{{item.name}}</div>
        <div class="emojilist_info">{{item.info}}</div>
        <div class="emojilist_price">{{$t('m.msg.DIAMOND')}}：{{formatMoney(item.price)}}</div>
      </div>
       </div>
      </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>

     <!-- 详情弹框 -->
      <van-popup closeable v-model="dialogFlag" class="popup">
        <div>{{$t('m.msg.MSG102')}}</div>
        <img :src="gift.httpPath" class="popup_img" />
        <div class="emojilist_name">{{gift.name}}</div>
        <div>{{gift.info}}</div>
        <div class="emojilist_price">{{$t('m.msg.DIAMOND')}}：{{formatMoney(gift.price)}}</div>
        <div class="popup_footer">
          <div @click="dialogFlag = false"  class="popup_btn">{{$t('m.msg.CANCEL_BTN')}}</div>
          <div type="primary" @click="buyEmoji" class="popup_btn" :style="gift.isPurchase?'background-color: #a1a1a1;':'background-color: #ff7300;'" >{{gift.isPurchase?$t('m.msg.MSG108'):$t('m.msg.MSG103')}}</div>
        </div>
      </van-popup>
  </div>
</template>

<script>
	import {
    List,
    PullRefresh,
    Popup 
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery, getQuery, formatMoney} from '@/api/query';
export default {
  name: 'emojiList',
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Popup.name]: Popup,
    HeaderNav
  },
  data(){
    return {
      page: 1,
      list:[],
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false,
      dialogFlag: false,
      gift: {},
      pageSize: 16
    }
  },
  methods: {
    showDetail(gift){
      this.gift = gift;
      this.dialogFlag = true;
    },
    formatMoney(money){
      return formatMoney(money);
    },
    //加载数据
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //初始化
      this.pages = 0;
      this.list = [];
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.loadData();
    },
    loadData(){
      var that = this;
      if(that.pages > 0 && that.page > that.pages){
        that.finished = true;
      }
      let params = {
        page: that.page,
        pageSize: that.pageSize
      }
      postQuery('/member/expression/list', params)
        .then (res => {
          if(res.code == 200){
            //如果数据不够finished
            if(res.data.records.length < that.pageSize){
              that.finished = true;
            }
            that.list = that.list.concat(res.data.records)
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
        }).catch(function (error) {
          that.error = true;     
        });
    },
    //购买表情
    buyEmoji(){
      let that = this
      if(that.gift.isPurchase){
        return
      }
      postQuery('/member/expression/purchase/'+that.gift.id)
        .then (res => {
          if(res.code == 200){
            that.$toast.fail(that.$i18n.t('m.msg.MSG104'));
            
          }else{
            that.$toast.fail(res.msg);
          }
          this.dialogFlag = false;
        })
      }
  },
  created(){
    this.loadData()
  }
}
</script>
<style scoped>
	.emojilist_container{
		display: flex;
		flex-wrap: wrap;
	}

  .emojilist_box{
    height: 24vh;
    width: 22vw;
    margin-left: 20px;
    margin-top: 20px;
    text-align: center;
  }

  .emojilist_img{
    height: 40%;
    width: 60%;
  }

  .emojilist_name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 文本不换行，这样超出一行的部分被截取，显示... */
  }

  .emojilist_info{
    font-size: 26px;
    color: #a1a1a1;
    display: -webkit-box;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  
  .popup_footer{
    display: flex;
    margin-top: 10%;
    justify-content:space-between;
    width: 60%;
    margin-left: 20%;
  }

  .popup_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: #ff7300;
    color: white;
    font-size: 20px;
    height: 60px;
    width: 100px;
  }

  .popup{
    width: 70vw;
    /* height: 30vh; */
    text-align: center;
    font-size: 32px;
     color: #a1a1a1; 
    padding: 20px 20px;
  }


  .popup_img{
    width: 20%;
    height: 20%;
    margin-top: 20px;
  }

</style>
